<template>
  <div class="main">
    <p  class="main_text">识别明细</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="serachData" class="df">
        <el-form-item label="操作人：" style="width: 20%">
          <el-input v-model="serachData.name" placeholder="操作人：" class="mr20" />
        </el-form-item>
        <el-form-item label="操作类型：" style="width: 20%">
          <el-select v-model="serachData.topUp" placeholder="操作类型：" class="mr20" clearable>
            <el-option label="充值" value="true" />
            <el-option label="使用" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">查询</el-button>
          <el-button type="primary" plain @click="resc">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <el-table :data="tableData"  border v-adaptive >
        <el-table-column label="编号" prop="id" />
        <el-table-column label="商品信息" prop="type" />
        <el-table-column label="操作次数" prop="num" />
        <el-table-column label="剩余次数" prop="leftNum" />
        <el-table-column label="金额" prop="fee" />
        <el-table-column label="操作人" prop="name" />
        <el-table-column label="操作时间" prop="createdAt" />
      </el-table>
      <!-- #################################### 分页 #################################### -->
      <smartPager
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="Number(total)"
        @change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ElMessage} from 'element-plus';
import {Wallet, Edit} from '@element-plus/icons-vue';
import {formatTime, formatTimeAll} from '@/filters/index';
import {RequestRecognizeLogList, RequestRecognizeLeft, RequestSettleId} from '@/api/path/index.js';
import {ref} from 'vue';

const serachData = ref({
  name: null,
  topUp: null,
});

/* ************************ 分页获取数据 ************************ */
/* ************* 获取列表数据 ************* */
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref<any>([]);
/* ************* 扫描剩余次数 ************* */
const scanResidue = ref<any>([]);
const userInfo = JSON.parse(localStorage.getItem('roleInfo')!);
const getScanResidueData = () => {
  RequestRecognizeLogList({
    page: currentPage.value,
    rows: pageSize.value,
    topUp: serachData.value.topUp,
    name: serachData.value.name,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.createdAt = formatTimeAll(item.createdAt);
      // console.log(item);
      if (item.num > 0) {
        item.num = '+' + item.num;
      }
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
const searchBtn = () => {
  getScanResidueData();
};
const resc = () => {
  currentPage.value = 1;
  (serachData.value.topUp = null), (serachData.value.name = null), getScanResidueData();
};
const handleSizeChange = (val: number) => {
  getScanResidueData();
};
const handleCurrentChange = (val: number) => {
  getScanResidueData();
};
getScanResidueData();
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: 0.625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: 0.0625rem solid #dcdfe6;
    border-left: none;
  }
}

.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 上传框 */
.upload {
  width: 7.625rem;
  height: 7.625rem;
  border-radius: 0.375rem;
  background-color: #fafafa;
  overflow: hidden;
  border: 0.0625rem dashed #cdd0d6;
  position: relative;
}

.upload:hover {
  border: 0.0625rem dashed #116cf8;
  transition: 500ms;

  .add {
    color: #116cf8;
    transition: 500ms;
  }
}

.add {
  font-size: 2.25rem;
  color: #cccccc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

::v-deep .el-upload-list__item,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload {
  width: 7.5rem;
  height: 7.5rem;
}

::v-deep .el-upload {
  opacity: 0;
}
</style>
